<!--预案管理页面-->
<style lang="less" scoped>
.policy {
  margin: 15px;

  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    display: inline-block;
    margin-left: 20px;
  }
}
</style>

<template>
  <div class="policy">
    <Card :bordered="false">
      <p slot="title">更多功能 > <span class="select-font">预案管理</span>
      </p>
      <div>
        <Button type="primary"
                @click.native="addPolicy">新增预案</Button>
        <Button type="error"
                @click.native="del1"
                style="margin-left: 20px">删除预案</Button>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.name"
                 :maxlength="20"
                 style="width:200px;"
                 placeholder="请输入预案名称"></Input>
        </Form>
        <Button type="info"
                style="margin-left:20px"
                @click="getPolicy('1')">搜索</Button>
      </div>
    </Card>
    <div>
      <Table :data="policyData"
             @on-selection-change="showSelect"
             :columns="policyColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <Modal v-model="policyModal"
           title="预案信息"
           width="600"
           :mask-closable="false">
      <Form :model="policyItem"
            :rules="rules"
            :label-width="100">
        <Form-item label="预案标题"
                   prop="title">
          <Input v-model="policyItem.title"
                 :maxlength="100"
                 placeholder="请输入预案标题"></Input>
        </Form-item>
        <Form-item label="预案下达日期"
                   prop="doc_time">
          <Date-picker type="date"
                       :value="policyItem.doc_time"
                       format="yyyy-MM-dd"
                       @on-change="change"></Date-picker>
        </Form-item>
        <Upload v-if="btnSave"
                type="drag"
                :format="['doc','docx','pdf']"
                :max-size="102400"
                :on-exceeded-size="handleMaxSize"
                :on-format-error="handleFormatError"
                :on-success="handleSuccess"
                :on-error="handleError"
                :action="daoruUrl">
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload"
                  size="52"
                  style="color: #3399ff"></Icon>
            <p>上传政策原件(支持word)</p>
          </div>
        </Upload>
        <Spin size="large"
              fix
              v-if="spinShow"></Spin>
      </Form>
      <div slot="footer">
        <Button v-if="btnSave"
                type="primary"
                @click="ok">保存</Button>
        <Button v-if="!btnSave"
                type="primary"
                @click="changePolicy">修改</Button>
        <Button @click="policyModal = false">取消</Button>
      </div>
    </Modal>
    <del-modal title="预案"
               :url="urlPolicydel"
               :delArr="selectData"
               @del="del"
               ref="delModal"></del-modal>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'public/delModal';
import { domain2, domain } from 'global/setting';
export default {
  components: {
    'del-modal': delModal,
  },
  data() {
    return {
      urlPolicyList: '/bus/emergplan/list',
      urlPolicyNew: '/bus/emergplan/new',
      urlPolicydel: '/bus/emergplan/del',
      urlPolicyedit: '/bus/emergplan/edit',
      searchItem: {
        name: '',
      },
      rules: {
        title: [
          { required: true, message: '预案标题不能为空', trigger: 'blur' },
        ],
        doc_time: [
          {
            required: true,
            message: '预案下达时间不能为空',
            trigger: 'change',
          },
        ],
      },
      policyItem: {},
      policyModal: false,
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      policyData: [],
      policyColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '标题',
          key: 'title',
        },
        {
          title: '上传日期',
          key: 'date_time',
        },
        {
          title: '文件下达日期',
          key: 'doc_time',
        },
        {
          title: '预案原件',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  attrs: {
                    target: '_blank',
                  },
                  style: {
                    color: 'black',
                  },
                  on: {
                    click: () => {
                      this.downloadFile(domain2 + params.row.doc_place);
                    },
                  },
                },
                `${params.row.title}附件`
              ),
            ]);
          },
        },
        {
          title: 'pdf预览文件',
          render: (h, params) => {
            return h('div', [
              h(
                'a',
                {
                  attrs: {
                    href: domain2 + params.row.pdf_place,
                    target: '_blank',
                  },
                  style: {
                    color: 'black',
                  },
                },
                `${params.row.title} pdf文件`
              ),
            ]);
          },
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                '编辑'
              ),
            ]);
          },
        },
      ],
      selectData: [],
      daoruUrl: '',
      saveUrl: '',
      btnSave: true,
      actionPage: '1',
      spinShow: false,
      modal2: false,
    };
  },
  methods: {
    getPolicy(page = 1) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
        },
        url: this.urlPolicyList,
        token: storage.session.get('token'),
        success: res => {
          this.policyData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.name !== '') {
        params.data.searchValue.title = `${this.searchItem.name}|#|like`;
      }
      ajaxPost(params);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    change(data) {
      this.policyItem.doc_time = data;
    },
    handleSuccess(res) {
      this.saveUrl = res.result.path;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: `文件格式不正确，请上传 doc,docx 格式。`,
      });
    },
    handleError() {
      this.$Message.warning({
        content: '上传失败',
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: `文件太大，不能超过 100M。`,
      });
    },
    addPolicy() {
      this.policyModal = true;
      this.policyItem = {
        title: '',
        doc_time: '',
        doc_place: '',
      };
      this.saveUrl = '';
      this.btnSave = true;
      $('.ivu-upload-list').html('');
    },
    ok() {
      if (this.saveUrl === '') {
        this.$Message.warning({
          content: '请上传文件',
        });
        return;
      }
      this.spinShow = true;
      let params = {
        data: {
          title: this.policyItem.title,
          doc_time: this.policyItem.doc_time,
          doc_place: this.saveUrl,
        },
        url: this.urlPolicyNew,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '新增成功',
            });
            this.policyModal = false;
            this.spinShow = false;
            this.getPolicy(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    changePage(page) {
      this.actionPage = page;
      this.getPolicy(page);
    },
    edit(row) {
      this.btnSave = false;
      this.policyModal = true;
      this.policyItem.title = row.title;
      this.policyItem.doc_time = row.doc_time;
      this.policyItem._id = row._id;
    },
    del() {
      this.selectData = [];
      this.getPolicy(this.actionPage);
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择政策');
      }
    },
    changePolicy() {
      let params = {
        data: {
          title: this.policyItem.title,
          doc_time: this.policyItem.doc_time,
          _id: this.policyItem._id,
        },
        url: this.urlPolicyedit,
        token: storage.session.get('token'),
        success: res => {
          if (res.data.code == '0000') {
            this.$Loading.finish();
            this.$Message.success({
              content: '修改成功',
            });
            this.policyModal = false;
            this.getPolicy(this.actionPage);
          } else {
            this.$Message.warning({
              content: res.data.message,
            });
          }
        },
      };
      ajaxPost(params);
    },
    downloadFile(path) { // 下载文件
      window.open(path);
    }
  },
  mounted() {
    this.getPolicy();
    this.daoruUrl = `${domain}/filemanage/upload?dir=emergplan&token=${storage.session.get(
      'token'
    )}`;
  },
};
</script>
